<template>
  <div class="todoapp">
    <todo-header @add="add" :list="list" @doCheck="doCheck" />
    <todo-main :list="newList" @del="del" />
    <todo-footer :list="list" @change="change" @clear="clear" />
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  data () {
    return {
      list: JSON.parse(localStorage.getItem('todos95')) || [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ],
      // 保存底部被点的状态
      // 默认是全部
      status: '全部'
    }
  },
  methods: {
    // 删除
    del (id) {
      // 把id不为要删除的id的元素全部过滤出来组成新的数组
      // 相当于删除了
      this.list = this.list.filter(v => v.id !== id)
    },
    // 添加
    add (task) {
      this.list.push({
        id: Date.now(),
        name: task,
        isDone: false
      })
    },
    change (status) {
      this.status = status
    },
    clear () {
      // 清除所有已完成的，也就是说筛选出所有未完成的组成新数组
      this.list = this.list.filter(v => !v.isDone)
    },
    doCheck (val) {
      this.list.forEach(v => (v.isDone = val))
    }
  },

  computed: {
    newList () {
      // 状态如果是已完成，就得到一个已完成的数组
      if (this.status === '已完成') {
        return this.list.filter(v => v.isDone)
      } else if (this.status === '未完成') {
        // 状态如果是未完成，就得到一个未完成的数组
        // this.newList = this.list.filter(v => v.isDone === false)
        return this.list.filter(v => !v.isDone)
      } else {
        // 否则就是全部
        return this.list
      }
    }
  },

  watch: {
    list: {
      deep: true,
      handler () {
        localStorage.setItem('todos95', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style></style>
